<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/styles/orderDetails.css">
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
</head>
<body>

<div id="app" class="container">
    <h2>订单详情</h2>

    <div class="card-grid">

        <!-- 订单信息卡片 -->
        <div class="card">
            <div class="card-title">订单信息</div>
            <div class="info-row">
                <div class="label">订单编号：</div>
                <div class="value">{{ order.orderId }}</div>
            </div>
            <div class="info-row">
                <div class="label">下单时间：</div>
                <div class="value">{{ order.createTime }}</div>
            </div>
            <div class="info-row">
                <div class="label">支付时间：</div>
                <div class="value">{{ order.payTime || '暂未支付' }}</div>
            </div>
            <div class="info-row">
                <div class="label">订单状态：</div>
                <div class="value">
                    <span :class="['status-tag', statusClass]">{{ order.statusLabel }}</span>
                </div>
            </div>
        </div>

        <!-- 收货地址卡片 -->
        <div class="card">
            <div class="card-title">收货地址</div>
            <div class="info-row">
                <div class="label">收货人：</div>
                <div class="value">{{ address.name }}</div>
            </div>
            <div class="info-row">
                <div class="label">联系方式：</div>
                <div class="value">{{ address.phone }}</div>
            </div>
            <div class="info-row">
                <div class="label">详细地址：</div>
                <div class="value">{{ address.region }} {{ address.address }}</div>
            </div>
        </div>

        <!-- 商品信息卡片 -->
        <div class="card" style="flex: 1 1 100%;">
            <div class="card-title">商品信息</div>
            <table>
                <thead>
                    <tr>
                        <th style="width: 40%">商品信息</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in order.items" :key="item.productId">
                        <td class="product-cell">
                            <img :src="item.imageUrl" alt="商品图片" class="product-image">
                            <span>{{ item.productName }}</span>
                        </td>
                        <td>￥{{ item.salePrice }}</td>
                        <td>{{ item.quantity }}</td>
                        <td>￥{{ item.salePrice * item.quantity }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 总金额卡片 -->
        <div class="card">
            <div class="card-title">订单汇总</div>
            <div class="total-section">
                <div class="total-line"><span>商品总额</span><span>￥{{ subtotal }}</span></div>
                <div class="total-line"><span>运费</span><span>￥{{ shippingFee }}</span></div>
                <div class="total-line"><span>优惠折扣</span><span>-￥{{ discount }}</span></div>
                <div class="total-line bold"><span>实付金额</span><span>￥{{ order.totalAmount }}</span></div>
                <div class="total-line"><span>支付方式</span><span>{{ paymentMethod }}</span></div>
                <div class="total-line"><span>备注信息</span><span>{{ order.remark || '无' }}</span></div>
            </div>
        </div>

        <!-- 物流信息卡片 -->
        <div class="card">
            <div class="card-title">物流信息</div>
            <ul class="logistics-timeline">
                <li v-for="step in logisticsSteps" class="logistics-item">
                    <div class="logistics-time">{{ step.time }}</div>
                    <div class="logistics-status">{{ step.status }}</div>
                    <div class="logistics-desc">{{ step.desc }}</div>
                </li>
            </ul>
        </div>

    </div>

    <!-- 返回按钮 -->
    <a href="/order.html" class="btn-back">返回订单列表</a>
</div>

<script src="/js/vue.js"></script>
<script src="/js/orderDetails.js"></script>

</body>
</html>
